<template>
  <div class="max-w-5xl mx-auto px-4 mb-8">
    <div class="flex items-center justify-center mb-6">
      <div class="w-16 h-px bg-ink/20"></div>
      <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-kai mx-4 text-ink">专家评语</h2>
      <div class="w-16 h-px bg-ink/20"></div>
    </div>

    <div
      class="bg-white/70 rounded-sm shadow-md p-6 mb-4 transform transition-all duration-300 hover:shadow-lg"
    >
      <div class="text-gray-700 leading-relaxed font-kai text-[clamp(0.9rem,2vw,1.1rem)] mb-4 relative">
        <p class="line-clamp-2 overflow-hidden">
          {{ reviewText }}
        </p>
        <!-- 渐变遮罩 -->
        <div class="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-white/70 to-transparent pointer-events-none"></div>
      </div>

      <div class="text-center">
        <button
          @click="$emit('showFullReview')"
          class="bg-[#D4AF37] text-white px-4 py-2 rounded-sm font-kai transform transition-all duration-300 hover:bg-[#B8941F] hover:scale-105"
        >
          查看全部评语
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  reviewText: {
    type: String,
    default: '此作品笔法娴熟，章法布局合理，体现了深厚的书法功底。作者在传统基础上融入个人理解，展现出独特的艺术风格。整体气韵生动，墨色浓淡相宜，字里行间透露出作者对传统文化的深刻理解和现代审美的巧妙结合，实为难得佳作。'
  }
});

defineEmits(['showFullReview']);
</script>

<style scoped>
.text-ink {
  color: #2c2c2c;
}

/* 两行文字限制 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  max-height: 3em; /* 2行的高度 */
}
</style>